<!--
 * @Description: 
 * @Version: 2.0
 * @Author: chengxin
 * @Date: 2022-12-16 11:03:21
 * @LastEditors: chengxin
 * @LastEditTime: 2022-12-16 16:25:00
-->
<template>
  <LuckyWheel
      ref="myLucky"
      width="300px"
      height="300px"
      :prizes="prizes"
      :blocks="blocks"
      :buttons="buttons"
      @start="startCallback"
      @end="endCallback"
    />
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElNotification } from 'element-plus'
const props=defineProps({
  prizes:{
    type:Array,
    default:()=>{return []}
  },
  selectIndex:{
    type:Number,
    default:()=>{return 0}
  }
})
const myLucky=ref()
const blocks=reactive([{ padding: '10px', background: '#a20511' }])
const buttons=reactive([
        { radius: '40%', background: '#a20511' },
        { radius: '35%', background: '#1885b4' },
        {
          radius: '30%', background: '#caeef3',
          pointer: true,
          fonts: [{ text: '开始', top: '-10px' }]
        }
      ])
const index=ref(0)
// 点击抽奖按钮会触发star回调
const startCallback=()=>{
  // 调用抽奖组件的play方法开始游戏
    myLucky.value.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        // const index = 0
        // 调用stop停止旋转并传递中奖索引
        // console.log(selectIndex);
        index.value=props.selectIndex?props.selectIndex-1:Math.floor(Math.random()*7)
        console.log(index.value);
       myLucky.value.stop(index.value)
      }, 3000)
}
// 抽奖结束会触发end回调
const endCallback= ()=> {
      console.log(props.prizes[index.value].fonts[0].text)
      ElNotification({
        title: '中大奖啦',
        message: `恭喜您抽中奖品${props.prizes[index.value].fonts[0].text}`,
        type: 'success',
      })
    }
</script>

<style lang="less" scoped></style>
